<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-bar-box">
				<image class="search-span" src="/static/search.png"></image>
				<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10" focus/>
			</view>
			<button class="search-btn">搜索</button>
		</view>

		<view class="lastout">
			<view class="out">
				<text>共{{filteredOrders.length}}条</text>
				<view class="select">
					<uni-data-select
						v-model="selectedStatus"
						:localdata="range"
						@change="filterOrders"
					></uni-data-select>
				</view>
			</view>

			<!-- Orders list -->
			<view v-for="order in filteredOrders" :key="order.id" class="line">
				<view class="title">
					<text>订单号：{{ order.orderNumber }}</text>
					<text>{{ order.amount }}元</text>
				</view>
				<view class="content">
					<view class="title2">
						<text>下单用户：{{ order.user }}</text>
						<image src="/static/phone.png" mode=""></image>
					</view>
					<view class="time">
						预约时间：{{ order.appointmentTime }}
						<!-- <image src="/static/phone.png" mode=""></image> -->
					</view>
					<view class="details">
						<text>服务项目：{{ order.services }}</text>
					</view>
				</view>
				<view class="bottom">
					<text>下单时间：{{ order.orderTime }}</text>
					<navigator url="/pages/function/orderManagement/orderDetails/orderDetails" class="daohang">查看详情</navigator>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				selectedStatus: 0, // Default to "待服务"
				range: [
					{ value: 0, text: "待服务" },
					{ value: 1, text: "已完成" }
				],
				orders: [
					{
						id: 1,
						orderNumber: "2021010831323",
						amount: 2000.0,
						user: "张三丰",
						appointmentTime: "2022-10-10 11:00",
						orderTime: "2022-10-10 11:09",
						services: "宝马X5加装轮毂、清洁车辆、汽车美容",
						status: 0 // 0 represents "待服务"
					},
					{
						id: 2,
						orderNumber: "2021010831324",
						amount: 1500.0,
						user: "李四",
						appointmentTime: "2022-10-12 13:00",
						orderTime: "2022-10-12 12:00",
						services: "奥迪A6清洗内饰、外观打蜡",
						status: 1 // 1 represents "已完成"
					}
					// Add more orders here
				],
				filteredOrders: []
			};
		},
		methods: {
			// Method to filter orders based on the selected status
			filterOrders() {
				this.filteredOrders = this.orders.filter(order => order.status === this.selectedStatus);
			}
		},
		// When the component is created, we show "待服务" orders by default
		created() {
			this.filterOrders();
		}
	};

</script>

<style>
// 搜索框
.search-bar{
	width: 100%;
	height: 100rpx;
	margin-top: 2%;
	display: flex;
	
}
.search-bar-box{
	display: flex;
	margin: 0 auto;
	width: 620rpx;
	height: 60rpx;
	border:5rpx solid #white;
	border-radius: 20rpx;
	background-color: white;
}
.search-span{
	width: 50rpx;
	height: 30rpx;
	margin-top: 16rpx;
	margin-left: 30rpx;
}
.search-text{
	width: 100%;
	margin-top: 10rpx;
	margin-left: 20rpx;
	font-size: 30rpx;
	color: blue;
}
.search-btn{
	
	color: blue;
	text-align: center;
	display: inline-block;
	font-size: 28rpx;
	width: 140rpx;
	height: 65rpx;
	line-height: 65rpx;
	/* border-radius: 30rpx; */
	letter-spacing: 3rpx;
}

.select{
	/* width: 130rpx;
	height: 64rpx; */
	left: 23px;
	top: 118px;
	padding-top: 30rpx;
	margin-left: 440rpx;
	width: 100px;
	height: 32px;
	line-height: 20px;
	background-color: rgba(255,255,255,1);
	color: rgba(16,16,16,1);
	font-size: 14px;
	text-align: left;
	font-family: Microsoft Yahei;
}
.out{
	background-color: white;
	margin-top: -28rpx;
	
	display: flex;
}
.out>text:nth-child(1){
	font-weight: bold;
	
	margin-left: 20rpx;
	padding-top: 40rpx;
}
.lastout{
	/* background-color:cadetblue; */
	height: 2000rpx;
}
.title{
	border-bottom:5rpx solid #EFEFF5;
	margin-top: 15rpx;
	padding-bottom:20rpx;
}
.title>text:nth-child(1){
	font-weight: bold;
	margin-left: 45rpx;
	font-size: 16px;
	
}
.title>text:nth-child(2){
	font-weight: bold;
	margin-left: 150rpx;
	left: 284px;
	top: 182px;
	width: 77px;
	height: 20px;
	line-height: 20px;
	color: rgba(240,89,90,1);
	font-size: 14px;
	text-align: left;
	font-family: PingFangSC-bold;
}
.title2{
	left: 11px;
	top: 307px;
	width: 155px;
	height: 23px;
	line-height: 23px;
	color: rgba(16,16,16,1);
	font-size: 16px;
	text-align: left;
	font-family: PingFangSC-medium;
	margin-left: 45rpx;
	font-weight: bold;
	
}
.time{
	margin-top: 10rpx;
	margin-left: 45rpx;
	font-weight: bold;
}
.time>image{
	margin-left: 220rpx;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	
}
.title2 {
	display: flex;
	align-items: center;
	width: 100%;
	height: 60rpx;
	margin-left: 45rpx;
	font-weight: bold;
}

.title2 > text {
	font-size: 16px;
	color: rgba(16,16,16,1);
	font-family: PingFangSC-medium;
}

.title2 > image {
	width: 44rpx;
	height: 44rpx;
	margin-left: 80rpx; /* Adjust spacing between text and image */
}

.details{
	border-bottom:5rpx solid #EFEFF5;
	padding-bottom: 30rpx;
	
	
}
.details>text{
	margin-left: 45rpx;
	font-weight: bold;
	
	
	
}
.bottom{
	display: flex;
	justify-content: space-between;
	border-bottom:5rpx solid #EFEFF5;
}
.bottom>text{
	margin-top: 10rpx;
	margin-left: 45rpx;
}
.daohang{
	margin-right: 10rpx;
	background-color: blue;
	color: white;
	width: 200rpx;
	height: 50rpx;
	text-align: center;
	border-radius: 10rpx;
	
}
.line{
	border-left:10rpx solid #557AD6;
	border-radius: 10rpx;
	margin-left: 10rpx;
	margin-top: 50rpx;
	background-color: white;
}
.lastout{
	background-color: white;
}
</style>
